<template>
	<div>
		<el-dialog title="查看详情" width="800px" @open="open" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body>
			<table class="table table-bordered" align="center" width="100%" style="word-break:break-all; margin-bottom:50px;  font-size:13px;">
				<tbody>
				 <tr>
						<td class="title" width="100">编号：</td>
						<td>
							{{form.id}}
						</td>
				 </tr>
				 <tr>
						<td class="title" width="100">模块标题：</td>
						<td>
							{{form.title}}
						</td>
				 </tr>
				<tr>
						<td class="title" width="100">下拉列表数字：</td>
						<td>
							<span v-if="form.dropdown_int == '1'">Apple</span>
							<span v-if="form.dropdown_int == '2'">Banana</span>
							<span v-if="form.dropdown_int == '3'">pineapple</span>
							<span v-if="form.dropdown_int == '4'">melon</span>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">下拉列表字符：</td>
						<td>
							<span v-if="form.dropdown_char == '1'">Dog</span>
							<span v-if="form.dropdown_char == '2'">Cat</span>
							<span v-if="form.dropdown_char == '3'">Pig</span>
							<span v-if="form.dropdown_char == '4'">Goose</span>
						</td>
				</tr>
				 <tr>
						<td class="title" width="100">下拉列表多选：</td>
						<td>
								{{formatStr(form.dropdown_mult_table,'[{"key":"House","val":"1","label_color":"info"},{"key":"Apartment","val":"2","label_color":"info"},{"key":"Mansion","val":"3","label_color":"info"},{"key":"Container","val":"4","label_color":"info"},{"key":"Hotel","val":"5","label_color":"info"},{"key":"Vila","val":"6","label_color":"info"}]')}}
						</td>
				</tr>
				<tr>
						<td class="title" width="100">图片上传单：</td>
						<td>
							<el-image v-if="form.image_single" class="table_list_pic" :src="form.image_single"  :preview-src-list="[form.image_single]"></el-image>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">图片上传多：</td>
						<td>
						<div v-if="form.image_multi_table && form.image_multi_table.indexOf('[{') != -1" class="demo-image__preview">
							<el-image style="margin-right:5px" v-for="(item,i) in JSON.parse(form.image_multi_table)"  class="table_list_pic" :src="item.url" :key="i"  :preview-src-list="[item.url]"></el-image>
						</div>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">文件上传单：</td>
						<td>
						<el-link v-if="form.file_single" style="font-size:13px;" :href="form.file_single" target="_blank">下载附件</el-link>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">文件上传多：</td>
						<td>
						<div v-if="form.file_multi_table && form.file_multi_table.indexOf('[{') != -1">
							<el-link style="margin-right:5px; font-size:13px" v-for="(item,i) in JSON.parse(form.file_multi_table)" target="_blank" :href="item.url"  :key="i">下载附件{{i+1}}</el-link>
						</div>
						</td>
					</tr>
				<tr>
						<td class="title" width="100">TINY富文本：</td>
						<td>
							<div v-html="form.tiny_editor"></div>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">MARK富文本：</td>
						<td>
							<div v-html="form.mark_editor"></div>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">WANG富文本：</td>
						<td>
							<div v-html="form.wang_editor"></div>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">键值对：</td>
						<td>
							{{form.keyvalue_pair_table}}
						</td>
				 </tr> 
				<tr>
						<td class="title" width="100">省市联动：</td>
						<td>
							{{form.address_table}}
						</td>
				 </tr> 
				 <tr>
						<td class="title" width="100">操作状态（0正常 1异常）：</td>
						<td>
							<span v-if="form.status == '0'">正常</span>
							<span v-if="form.status == '1'">禁用</span>
						</td>
				</tr>
				<tr>
						<td class="title" width="100">JSON数组：</td>
						<td>
							{{form.tag_label}}
						</td>
				 </tr> 
				<tr>
						<td class="title" width="100">计数器：</td>
						<td>
							{{form.number_updown}}
						</td>
				 </tr> 
				<tr>
						<td class="title" width="100">操作时间：</td>
						<td>
							{{parseTime(form.oper_time)}}
						</td>
				</tr>
				</tbody>
			</table>
		</el-dialog>
	</div>
</template>
<script>
import { detail } from '@/api/admin/test'
export default {
	name:'testdetail',
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
	},
	data() {
		return {
			form:{
			},
		}
	},
	methods: {
		open(){
			detail(this.info).then(res => {
				this.form = res.data
			})
		},
		closeForm(){
			this.$emit('update:show', false)
		}
	}
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>
